<template>
  <ScrollContainer :style="{ height: scrollerHeight }" ref="wrapperRef">
    <div class="diy-form-widget-container" :class="[terminalType + '-layout-container']">
      <Form
        ref="formRef"
        :label-col="labelCol"
        :layout="designer.globalConfig.layoutType"
        :wrapper-col="wrapperCol"
        class="full-height-width widget-form"
        :class="[terminalType + '-layout']"
        :style="{ minHeight: formHeight }"
      >
        <template v-if="designer.widgetList.length === 0">
          <div class="no-widget-hint">请从左侧列表中选择一个组件, 然后用鼠标拖动组件放置于此处</div>
        </template>

        <Draggable
          :list="designer.widgetList"
          item-key="id"
          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 300 }"
          :component-data="{ name: 'fade' }"
          handle=".drag-handler"
          @end="onDragEnd"
          @add="onDragAdd"
          @update="onDragUpdate"
          :move="checkMove"
        >
          <template #item="{ element: widget, index }">
            <div class="transition-group-el">
              <component
                :is="getWidgetComp(widget)"
                :widget="widget"
                :designer="designer"
                :key="widget.id"
                :parentList="designer.widgetList"
                :indexOfParentList="index"
              />
            </div>
          </template>
        </Draggable>
      </Form>
    </div>
  </ScrollContainer>
</template>
<script lang="ts" name="diy-form-designer" setup>
  import { ref, computed, onMounted, nextTick, Ref, inject } from "vue"
  import Draggable from "vuedraggable"
  import { Form } from "ant-design-vue"
  import type { CSSProperties } from "vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { Icon } from "/@/components/Icon"
  import { ScrollContainer } from "/@/components/Container"
  import { propTypes } from "/@/utils/propTypes"
  import type { Designer } from "../type"
  // 容器组件 + 字段组件
  import FieldComponents from "../form-widget/field-widget/index"
  import ContainerComponents from "../form-widget/container-widget"
  const { createMessage } = useMessage()
  // const designerConfig = inject('designerConfig')

  const stats = ref({})
  const props = defineProps({
    scrollerHeight: { type: Number },
    designer: { type: Object as () => Designer },
  })
  const designer = props.designer as Designer
  const terminalType = computed(() => designer.terminalType)

  const scrollerHeight = computed(() => (props.scrollerHeight || 800) + "px")
  const formHeight = computed(() => (props.scrollerHeight || 800) - 20 + "px")
  const labelCol = computed(() => designer.globalConfig.labelCol || {})
  const wrapperCol = computed(() => designer.globalConfig.wrapperCol || {})

  onMounted(() => {})

  const onDragEnd = (evt) => {}
  const getWidgetComp = (widget) => {
    return FieldComponents[widget.type + "-widget"] || ContainerComponents[widget.type + "-widget"]
  }

  const onDragAdd = (evt) => {
    const newIndex = evt.newIndex
    // if (!!this.designer.widgetList[newIndex]) {
    //   this.designer.setSelected( this.designer.widgetList[newIndex] )
    // }

    // this.designer.emitHistoryChange()
  }

  const onDragUpdate = () => {
    // this.designer.emitHistoryChange()
  }

  const checkMove = (evt) => {
    // return this.designer.checkWidgetMove(evt)
  }
</script>

<style lang="less" scoped>
  @import "../index.less";

  .pc-layout-container,
  .pad-layout-container,
  .h5-layout-container {
    padding: 10px !important;
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  .diy-form-widget-container {
    // padding: 5px;
    background: #f1f2f3;
    height: 100% !important;
    overflow-x: hidden;
    overflow-y: auto;
    margin: auto 0;

    .full-height-width {
      height: 100% !important;
      // padding: 3px;
      background: #ffffff;
    }
    .no-widget-hint {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 18px;
      color: #999999;
    }

    .form-widget-list {
      min-height: calc(100vh - 56px - 68px);
      padding: 3px;
    }

    .pc-layout {
      position: relative;
      margin: 0 auto;
      // min-width: 1000px !important;
      border-radius: 10px;
    }

    .pad-layout {
      position: relative;
      margin: 0 auto;
      max-width: 960px;
      border-radius: 10px;
      box-shadow: 0 0 1px 10px #495060;
    }

    .h5-layout {
      position: relative;
      margin: 0 auto;
      width: 420px;
      border-radius: 10px;
      //border-width: 10px;
      box-shadow: 0 0 1px 10px #495060;
    }

    .ant-form {
      height: 100% !important;
    }
    .widget-form {
      padding: 3px;
      border: 1px dashed rgba(170, 170, 170, 0.75);
    }
  }

  .grid-cell {
    min-height: 30px;
    border-right: 1px dotted #cccccc;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
</style>
